<div class="text-container" [shAttachMenu]="menu" [shMenuData]="items">
  <div class="fixed-text" [style.color]="fixedTextFontColor" [style.font-size.px]="fixedTextFontSize"
    [style.text-shadow]="fixedTextShadow" [style.font-weight]="textFontBlod === '1' ? 700 : 400">
    {{ fixedText }}
  </div>
  <div class="carousel-text">
    <nz-carousel #carousel nzVertical [nzAutoPlay]="true" [nzDots]="false" [nzAutoPlaySpeed]="scrollSpeed">
      <div nz-carousel-content *ngFor="let item of carouselText">
        <div [style.color]="textFontColor" [style.font-size.px]="textFontSize" [style.text-shadow]="textShadow"
          [style.font-weight]="textFontBlod === '1' ? 700 : 400">
          <span class="text-item" *ngFor="let o of item">{{ o.label }}</span>
        </div>
      </div>
    </nz-carousel>
  </div>
</div>

<sh-context-menu #menu>
  <ng-template *ngFor="let item of items" shContextMenuItem>
    <div (click)="onClick($event, item)">{{ item.label }}</div>
  </ng-template>
</sh-context-menu>

<!-- 对话框 -->
<nz-modal [(nzVisible)]="isVisible" nzTitle="编辑字体样式" [nzFooter]="modalFooter" [nzMask]="false" (nzOnCancel)="destroyTplModal()">
  <form>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="12">字体大小(固)</nz-form-label>
      <nz-form-control [nzSm]="4" [nzXs]="12">
        <input nz-input type="number" name="fixedtextfontsize" [(ngModel)]="fixedTextFontSize" />
      </nz-form-control>
      <nz-form-label [nzSm]="6" [nzXs]="12">字体大小(浮)</nz-form-label>
      <nz-form-control [nzSm]="4" [nzXs]="12">
        <input nz-input type="number" name="textfontsize" [(ngModel)]="textFontSize" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="12">字体颜色(固)</nz-form-label>
      <nz-form-control [nzSm]="4" [nzXs]="12">
        <input nz-input type="color" name="fixedtextfontcolor" [(ngModel)]="fixedTextFontColor" />
      </nz-form-control>
      <nz-form-label [nzSm]="6" [nzXs]="12">字体颜色(浮)</nz-form-label>
      <nz-form-control [nzSm]="4" [nzXs]="12">
        <input nz-input type="color" name="textfontcolor" [(ngModel)]="textFontColor" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">文字描边(固)</nz-form-label>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="number" name="fixedtextshadowsize1" [(ngModel)]="fixedTextShadowSize1" (ngModelChange)="fixedTextShadowChanges($event)" />
      </nz-form-control>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="number" name="textshadowsize2" [(ngModel)]="fixedTextShadowSize2" (ngModelChange)="fixedTextShadowChanges($event)" />
      </nz-form-control>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="number" name="textshadowsize3" [(ngModel)]="fixedTextShadowSize3" (ngModelChange)="fixedTextShadowChanges($event)" />
      </nz-form-control>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="color" name="textshadowcolor" [(ngModel)]="fixedTextShadowColor" (ngModelChange)="fixedTextShadowChanges($event)" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">文字描边(浮)</nz-form-label>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="number" name="textshadowsize1" [(ngModel)]="textShadowSize1" (ngModelChange)="textShadowChanges($event)" />
      </nz-form-control>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="number" name="textshadowsize2" [(ngModel)]="textShadowSize2" (ngModelChange)="textShadowChanges($event)" />
      </nz-form-control>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="number" name="textshadowsize3" [(ngModel)]="textShadowSize3" (ngModelChange)="textShadowChanges($event)" />
      </nz-form-control>
      <nz-form-control [nzSm]="4" [nzXs]="6">
        <input nz-input type="color" name="textshadowcolor" [(ngModel)]="textShadowColor" (ngModelChange)="textShadowChanges($event)" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">是否加粗</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-radio-group name="textfontblod" [(ngModel)]="textFontBlod">
          <label nz-radio nzValue="1">是</label>
          <label nz-radio nzValue="0">否</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">背景图</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-radio-group name="hasbg" [(ngModel)]="hasBg" (ngModelChange)="hasBgChange($event)">
          <label nz-radio nzValue="1">是</label>
          <label nz-radio nzValue="0">否</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">滑动速度</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-slider name="scrollspeed" [nzMin]="1000" [nzMax]="20000" [(ngModel)]="scrollSpeed" [nzStep]="1000"></nz-slider>
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="destroyTplModal()">取消</button>
    <button nz-button nzType="primary" (click)="editTextStyle()" [nzLoading]="tplModalButtonLoading">
      保存修改
    </button>
  </ng-template>
</nz-modal>
<nz-modal [(nzVisible)]="isTextVisible" nzTitle="编辑字体内容" [nzFooter]="textModalFooter" [nzMask]="false" (nzOnCancel)="destroyTextTplModal()">
  <form>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">固定文本</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="text" name="fixedtext" [(ngModel)]="fixedText" />
      </nz-form-control>
    </nz-form-item>
  </form>
  <nz-divider></nz-divider>
  <h3>浮动文本</h3>
  <nz-tabset [nzType]="'card'" [nzSelectedIndex]="tabindex">
    <nz-tab *ngFor="let tab of carouselText;let index = index " [nzTitle]="titleTemplate">
      <ng-template #titleTemplate>
        <div>浮动第{{index}}页<i nz-icon type="close" class="ant-tabs-close-x" (click)="closeTab(tab)"></i></div>
      </ng-template>
      <form>
        <nz-form-item *ngFor="let text of tab;let i = index">
          <nz-form-label [nzSm]="6" [nzXs]="24">文本{{i}}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input type="text" name="carouseltext{{index}}{{i}}" [(ngModel)]="text.label" />
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-tab>
  </nz-tabset>`,
  <ng-template #textModalFooter>
    <button nz-button nzType="default" (click)="destroyTextTplModal()">
      取消
    </button>
    <button nz-button nzType="primary" (click)="editTxttContent()" [nzLoading]="textTplModalButtonLoading">
      保存修改
    </button>
  </ng-template>
</nz-modal>
